import React, { useEffect, useState } from 'react';
import *as service from '../../../../api/Salaryaccounting'
import { Button, Table, Drawer, Form, Input, message, Tag, Select, Switch, Radio, Space } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import type { DrawerProps } from 'antd/es/drawer';
import { PlusOutlined, ArrowDownOutlined } from '@ant-design/icons'
import './Salaryscheme.scss'
interface Props {

}
function Salaryscheme(props: Props) {
    interface DataType {
        id: number;
        name: string;
        cycle: string;
        taxperiod: string;
        usernumber: string;
        state: string;
        createdby: string;
        creationtime: string;
        toquote: boolean;
    }
    var [tableData, setTableData] = useState<DataType[]>([]) //定义表格组件状态--数据
    const [open, setOpen] = useState(false); //定义抽屉开关初始值
    var [form] = Form.useForm() //定义表单
    let [flig, setFlig] = useState(true)//自定义开关-方案新增，编辑使用
    let [id, setid] = useState(0)
    // 发送表格内容请求
    let corporateprotectionlist = async () => {
        let res = await service.Salaryscheme_list()
        setTableData(res.data.data)
    }

    // 组件挂载期
    useEffect(() => {
        corporateprotectionlist()
    }, [])

    // 抽屉开
    const showDrawer = () => {
        setOpen(true);
    };
    // 抽屉关
    const onClose = () => {
        setOpen(false);
        form.setFieldsValue({ name: '', cycle: '', taxperiod: '', usernumber: '', state: '', createdby: '' ,creationtime:'',toquote:''})
        setFlig(true)
    };

    //数据源
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', //表格列的标题
            render: (_, record) => <a>{tableData.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '薪资方案', //表格列的标题
            key: 'name',
            render: (_, record) => <div>{record.name}</div>//动态渲染标签/组件
        },
        {
            title: '薪资周期', //表格列的标题
            key: 'cycle',
            render: (_, record) => <div>{record.cycle}</div>,//动态渲染标签/组件
        },
        {
            title: '税期', //表格列的标题
            key: 'taxperiod',
            render: (_, record) => <div>{record.taxperiod}</div>,//动态渲染标签/组件
        },
        {
            title: '人数', //表格列的标题
            key: 'usernumber',
            render: (_, record) => <div>{record.usernumber} </div>,//动态渲染标签/组件
        },
        {
            title: '状态', //表格列的标题
            key: 'state',
            render: (_, record) => <div>{record.state}</div>,//动态渲染标签/组件
        },
        {
            title: '创建人', //表格列的标题
            key: 'createdby',
            render: (_, record) => <div>{record.createdby}</div>,//动态渲染标签/组件
        },
        {
            title: '创建时间', //表格列的标题
            key: 'creationtime',
            render: (_, record) => <div>{record.creationtime}</div>,//动态渲染标签/组件
        },
        {
            title: '启用/停用', //表格列的标题
            key: 'toquote',
            render: (_, record) => <div> <Switch defaultChecked onChange={(checked) => { onChange(checked, record) }} /></div>,//动态渲染标签/组件
        },
        {
            title: '操作', //表格列的标题
            render: (_, record) => <div>
                <button style={{ color: 'blue', border: "none", backgroundColor: '#fff', cursor: 'pointer' }} onClick={() => { jobupdata(record) }}>编辑</button>
                &emsp;
                &emsp;
                <button style={{ color: 'red', border: "none", backgroundColor: '#fff', cursor: 'pointer' }} onClick={() => { jobdelete(record) }}>删除</button>
            </div>,//动态渲染标签/组件
        },
    ]

    //状态按钮事件
    const onChange = async (checked: boolean, record: any) => {
        let { state, ...values } = record
        state = checked
        let res = await service.Salaryscheme_edit({ state, ...values })
        if (res.data.code==200) {
            corporateprotectionlist()
            message.success({ content: '操作成功' })
            onClose()
        }
    };
    //验证通过后的方法
    let onFinish = async (FinishValue: any) => {
        console.log(FinishValue);
        if (flig) {
            let res = await service.Salaryscheme_add(FinishValue)
            console.log(res.data);
            if (res.data.code==200) {
                corporateprotectionlist()
                message.success({ content: '添加方案成功' })
                onClose()
            }
        } else {
            let res = await service.Salaryscheme_edit({ id: id, ...FinishValue })
            if (res.data.code==200) {
                corporateprotectionlist()
                message.success({ content: '编辑方案成功' })
                onClose()
            }
        }
    }
    //验证失败时执行
    let onFinishFailed = (FinishFailedValue: any) => {
        console.log(FinishFailedValue)
    }
    // 编辑
    let jobupdata = (record: any) => {
        setid(record.id)
        setFlig(false)
        setOpen(true);
        form.setFieldsValue(record)
    }
    //删除
    let jobdelete = (record: any) => {
            let res = service.Salaryscheme_delete({ id: record.id })
            corporateprotectionlist()
            message.success({ content: '删除成功' })
    }
    return (
        <div className='Salaryscheme'>
            <h2>薪资方案</h2>
            <div className="opts">
                <Button onClick={() => { showDrawer() }} style={{ marginRight: 10 }} type='primary'>新增薪资方案<PlusOutlined /></Button>
                <Drawer title={flig ? '新增薪资方案' : '修改薪资方案'} placement="right" onClose={onClose} open={open}>
                    <Form
                        className='from'
                        form={form}
                        style={{ maxWidth: 400 }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="方案名称"
                            name="name"
                            rules={[{ required: true, message: '方案名称' }]}
                        >
                            <Input placeholder='请输入方案名称' />
                        </Form.Item>
                        <Form.Item
                            label="薪资周期"
                            name="cycle"
                            rules={[{ required: true, message: '薪资周期' }]}
                        >
                            <Input placeholder='请输入薪资周期' />
                        </Form.Item>

                        <Form.Item
                            label="税期"
                            name="taxperiod"
                            rules={[{ required: true, message: '税期' }]}
                        >
                            <Input placeholder='请输入税期' />
                        </Form.Item>

                        <Form.Item
                            label="人数"
                            name="usernumber"
                            rules={[{ required: true, message: '人数' }]}
                        >
                            <Input placeholder='请输入人数' />
                        </Form.Item>

                        <Form.Item
                            label="状态"
                            name="state"
                            rules={[{ required: true, message: '状态' }]}
                        >
                            <Input placeholder='请输入状态' />
                        </Form.Item>

                        <Form.Item
                            label="创建人"
                            name="createdby"
                            rules={[{ required: true, message: '创建人' }]}
                        >
                            <Input placeholder='请输入创建人' />
                        </Form.Item>

                        <Form.Item
                            label="创建时间"
                            name="creationtime"
                            rules={[{ required: true, message: '创建时间' }]}
                        >
                            <Input placeholder='请输入创建时间' />
                        </Form.Item>

                        <Form.Item
                            label="使用状态"
                            name="toquote"
                            rules={[{ required: true, message: '使用状态' }]}
                        >
                            <Select
                                style={{ width: 120 }}
                                options={[
                                    { value: true, label: '启用' },
                                    { value: false, label: '停用' }
                                ]}
                            />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                {flig ? '新增方案' : "修改方案"}
                            </Button>
                        </Form.Item>
                    </Form>
                </Drawer>
            </div>
            <Table size={'small'} columns={columns} dataSource={tableData} style={{ marginTop: 20 }} rowKey={""} pagination={{ pageSize: 5 }} />
        </div >
    );
}


export default Salaryscheme;